<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
	  .box{
	    transform:perspective(700px);
	    transform-style: preserve-3d;
	    width:200px;
	    height:350px;
	    transition:all 2s;
	    margin: 100px auto;
	    color: #fff;
	    line-height: 350px;
	    border-radius: 3px;
	    text-align: center;
	    font-size: 35px;
	  }
	  .box .after{
	    transform:translateZ(-1px) rotateY(180deg);/*scaleX(-1)等同*/
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    background: #333;
	  }
	  .box .before{
	    position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
       background: #333;
	  }
	  
	</style>
	<body>
	  <div class="box" id="box">
      <div class="before">正</div>
      <div class="after">反</div>
	</body>
	<script>
	  box.onclick = function(){
	    console.log(box.mark)
	    if(!box.mark){
	      box.style.transform = "perspective(700px) rotateY(180deg)"
	      box.mark=true;
	    }else{
	      box.style.transform = "perspective(700px)"
	      box.mark=false;
	    }
	  }
	</script>
</html>
